<template>
  <div class="Box">
    <el-form :rules="rules" ref="ruleFormRef" style="max-width: 319px;" label-position="right" label-width="100px" :model="fromData">
      <el-form-item label="昵称:" prop="nickname">
        <el-input v-model="fromData.nickname" />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="fromData.email" />
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="fromData.phone" />
      </el-form-item>
      <el-form-item label="生日:" prop="birthday">
        <el-config-provider :locale="zhCn">
          <el-date-picker v-model="fromData.birthday" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
        </el-config-provider>
      </el-form-item>
      <el-form-item label="地址:" prop="modeladdress">
        <el-cascader ref="cascader" v-model="fromData.modeladdress" :show-all-levels="true" clearable :key="modalKey" @change="cityChange" :props="customProps" :options="options" />
      </el-form-item>
      <el-form-item label="详细地址:" prop="detailedAddress">
        <el-input v-model="fromData.detailedAddress" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">提交信息</el-button>
        <el-button type="success" @click="reset(ruleFormRef)">重置信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script  setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { validatenNickname, validataEmail, validataPhone, validataBirthday, validataDetailedAddress, validataModeladdress } from '@/utlis/validate.js'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import getCityData from '@/utlis/getCityData.js'
import { changeUserInfo } from '@/api/index.js'
const address = ref('')
const fromData = reactive({
  nickname: '',
  email: '',
  phone: '',
  birthday: '',
  address: '',
  detailedAddress: '',
  modeladdress: ''
})

const modalKey = ref(1)
let options = reactive([])
const customProps = reactive({
  multiple: false, // 启用多选
  emitPath: false, // 只返回该节点的值
  value: 'name', // 自定义当前数组的键名 - value
  label: 'name', // 自定义当前数组的键名 - label
  children: 'areaList', // 自定义当前数组的键名 - children
  expandTrigger: 'click' // 次级菜单的展开方式 - click/hover
})
const { proxy } = getCurrentInstance()
onMounted(() => {
  getCityData().then(res => {
    options = res
    modalKey.value++
  })
})
const cascader = ref()
const cityChange = value => {
  const pathList = cascader.value.getCheckedNodes()
  address.value = pathList[0]?.pathLabels.join('')
}
const onSubmit = ruleFormRef => {
  if (!ruleFormRef) return
  ruleFormRef.validate(valid => {
    if (valid) {
      fromData.address = address.value + fromData.detailedAddress
      changeUserInfo(fromData).then(res => {
        if (res.data) {
          proxy.$Message({
            type: 'success',
            message: res.msg
          })
        } else {
          proxy.$Message.error(res.data)
        }
      })
    } else {
      return false
    }
  })
}
const rules = reactive({
  nickname: [{ validator: validatenNickname, trigger: 'blur' }],
  email: [{ validator: validataEmail, trigger: 'blur' }],
  phone: [{ validator: validataPhone, trigger: 'blur' }],
  birthday: [{ validator: validataBirthday, trigger: 'blur' }],
  detailedAddress: [{ validator: validataDetailedAddress, trigger: 'blur' }],
  modeladdress: [{ validator: validataModeladdress, trigger: 'change' }]
})
const reset = ruleFormRef => {
  ruleFormRef.resetFields()
}

const ruleFormRef = ref()
</script>
<style lang="less" scoped>
.Box {
  margin-top: 40px;
  background-color: #fafafa;
}
/deep/.el-form {
  padding: 10px 0;
}
</style>